<!-- src/components/AppHeader.vue -->
<template>
    <div class="app-header">
      <h1>📝 Vue3 任务清单</h1>
      <div class="repo-link">
        <a href="https://gitee.com/vue3-todo-demo/vue3-todo-list" target="_blank" rel="noopener noreferrer">
          <span class="link-icon">📦</span>
          <span class="link-text">查看源码</span>
        </a>
      </div>
      <div class="doc-toggle">
        <button @click="toggleDocs" class="toggle-button">
          {{ showDocs ? '隐藏组件文档' : '显示组件文档' }}
        </button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AppHeader',
    props: {
      showDocs: {
        type: Boolean,
        required: true
      }
    },
    emits: ['toggle-docs'],
    setup(props, { emit }) {
      const toggleDocs = () => {
        emit('toggle-docs');
      };
      
      return {
        toggleDocs
      };
    }
  }
  </script>
  
  <style scoped>
  .app-header {
    position: relative;
    margin-bottom: 30px;
  }
  
  h1 {
    text-align: center;
    color: #3498db;
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 36px;
    letter-spacing: 1px;
  }
  
  .repo-link {
    text-align: center;
    margin-bottom: 15px;
  }
  
  .repo-link a {
    display: inline-flex;
    align-items: center;
    background-color: #f3f6f9;
    color: #3498db;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1px solid #e1e8ed;
  }
  
  .repo-link a:hover {
    background-color: #e6f3ff;
    border-color: #3498db;
  }
  
  .link-icon {
    margin-right: 8px;
    font-size: 16px;
  }
  
  .doc-toggle {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .toggle-button {
    background-color: #ecf0f1;
    border: none;
    color: #7f8c8d;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
  }
  
  .toggle-button:hover {
    background-color: #e0e6e8;
    color: #2c3e50;
  }
  </style>